<template>
  <div class="itemwrap">
    <div class="item-head">
      <div class="back" @click="$router.go(-1)">
        <van-icon name="arrow-left" />
      </div>
      <div class="gosearch" @click="$router.push('/search')">
        <img
          src="https://m.ehaoyao.com/_nuxt/img/icon-search.0efa216.png"
        />商品
      </div>
      <div class="changestyle" @click="changeStyle">
        <van-icon name="bars" v-if="isShow1" />
        <van-icon name="apps-o" v-if="!isShow1" />
      </div>
    </div>
    <div class="item-orderby">
      <ul>
        <li @click="rankBy(0)" :class="[{ active: rank.by === 0 }]">销量</li>
        <li @click="rankByPrice()" :class="[{ active: rank.by === 1 }]">
          价格
          <div class="paixu">
            <div
              class="triangle-up"
              :class="[
                'triangle-up',
                { active: rank.by === 1 && rank.upDown === 0 }
              ]"
            ></div>
            <div
              class="triangle-down"
              :class="[
                'triangle-down',
                { active: rank.by === 1 && rank.upDown === 1 }
              ]"
            ></div>
          </div>
        </li>
        <li @click="rankBy(2)" :class="[{ active: rank.by === 2 }]">新品</li>
      </ul>
    </div>
    <div class="item-style">
      <div class="style1" v-if="isShow1">
        <div
          class="sy_none"
          v-if="items.length === 0"
          style="width：100%; font-size:0.4rem; text-align:center; margin-top:4rem"
        >
          没搜到啊~
        </div>
        <div
          class="sy_c clearfix"
          v-for="item in items"
          :key="item.id"
          @click="goDetail(item.id)"
        >
          <div class="sy_c_img">
            <img :src="item.pic" />
          </div>
          <div class="sy_c_right">
            <div class="sy_c_msg">
              <div class="sy_c_msg_title">
                {{ item.name }}
              </div>
              <div class="sy_c_msg_msg">
                {{ item.characteristic ? item.characteristic : '暂无描述' }}
              </div>
            </div>
            <div class="sy_c_shop clearfix">
              <div class="price">￥ {{ item.minPrice }}</div>
              <div class="addcart" @click.stop="addCart(item.id)">
                <van-icon name="add-square" color="red" />
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="style2" v-if="!isShow1">
        <div class="home-items">
          <div class="hi_container clearfix">
            <div
              class="sy_none"
              v-if="items.length === 0"
              style="width：100%; font-size:0.4rem; text-align:center; margin-top:4rem"
            >
              没搜到啊~
            </div>
            <div
              class="ht_cc"
              v-for="item in items"
              :key="item.id"
              @click="goDetail(item.id)"
            >
              <div class="ht_cc_img">
                <img :src="item.pic" />
              </div>
              <div class="ht_cc_msg">
                <p class="ht_cc_msg_title">{{ item.name }}</p>
                <p class="ht_cc_msg_msg">
                  {{ item.characteristic ? item.characteristic : '暂无描述' }}
                </p>
              </div>
              <div class="ht_cc_shopping clearfix">
                <span class="price">￥ {{ item.minPrice }}</span>
                <span class="add_cart" @click.stop="addCart(item.id)"
                  ><van-icon name="add-square" color="red"
                /></span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { goodslist, addCart } from '_api'
import { getToken } from '_utils/token.js'
import { Toast } from 'vant'
export default {
  data () {
    return {
      isShow1: true,
      rank: {
        by: 0,
        upDown: 0
      },
      items: []
    }
  },
  created () {
    this.homegoodlist()
  },
  methods: {
    changeStyle () {
      this.isShow1 = !this.isShow1
    },
    rankBy (n) {
      this.rank.by = n
      this.homegoodlist()
    },
    rankByPrice () {
      if (this.rank.by !== 1) {
        this.rank.by = 1
        this.rank.upDown = 0
        this.homegoodlist()
      } else {
        if (this.rank.upDown === 0) {
          this.rank.upDown = 1
        } else {
          this.rank.upDown = 0
        }
      }
      this.homegoodlist()
    },
    homegoodlist () {
      goodslist({
        k: this.$route.query.keyword,
        orderBy: this.orderBy
      }).then((res) => {
        if (res.data.code === 0) {
          this.items = res.data.data.result
        }
      })
    },
    goDetail (id) {
      this.$router.push(`/details/${id}`)
    },
    addCart (id) {
      addCart({
        number: 1,
        goodsId: id,
        token: getToken()
      }).then((res) => {
        console.log(res)
        if (res.data.code === 0) {
          Toast.success('剁手成功')
        }
        this.$store.commit('Goods/cartgoodschange', {
          goodslist: res.data.data.items,
          goodsallnum: res.data.data.number
        })
      })
    }
  },
  computed: {
    orderBy () {
      // 排序
      let orderBy = 'ordersDown'
      switch (this.rank.by) {
        case 0:
          // 销量降序
          orderBy = 'ordersDown'
          break
        case 1:
          // 价格 升序/降序
          if (this.rank.upDown === 0) {
            orderBy = 'priceUp'
          } else {
            orderBy = 'priceDown'
          }
          break
        case 2:
          // 时间
          orderBy = 'addedDown'
          break
        default:
          break
      }
      return orderBy
    }
  }
}
</script>

<style lang="scss" scoped>
.item-head {
  padding: 0.15rem 0;
  box-sizing: border-box;
  height: 0.88rem;
  display: flex;
  border-bottom: 1px solid #e5e5e5;
  .back,
  .changestyle {
    text-align: center;
    width: 13%;
    font-size: 0.4rem;
    line-height: 0.56rem;
  }
  .gosearch {
    flex: 1;
    position: relative;
    line-height: 0.56rem;
    padding-left: 0.66rem;
    background: #f0f2f5;
    color: #898989;
    img {
      position: absolute;
      left: 0.25rem;
      width: 0.26rem;
      top: 0.1rem;
    }
  }
}
.item-orderby {
  ul {
    width: 100%;
    display: flex;
    text-align: center;
    border-bottom: 1px solid #e5e5e5;
    box-sizing: border-box;
    li {
      display: block;
      flex: 1;
      line-height: 0.72rem;
      .paixu {
        display: inline-block;
        height: 0.22rem;
        .triangle-up {
          margin: 0 0 0.05rem;
          width: 0;
          height: 0;
          border-left: 0.11rem solid transparent;
          border-right: 0.11rem solid transparent;
          border-bottom: 0.11rem solid #999;
        }
        .triangle-down {
          width: 0;
          height: 0;
          border-left: 0.11rem solid transparent;
          border-right: 0.11rem solid transparent;
          border-top: 0.11rem solid #999;
        }
      }
    }
  }
}
.item-style {
  padding: 0 0.2rem 1rem;
}
.sy_c {
  padding: 0.11rem 0;
  width: 100%;
  border-bottom: 1px solid #e5e5e5;
  .sy_c_img {
    width: 2rem;
    height: 2rem;
    float: left;
    img {
      width: 2rem;
      height: 2rem;
    }
  }
  .sy_c_right {
    float: left;
    width: 4.8rem;
    margin-left: 0.2rem;
  }
  .sy_c_msg_title {
    font-size: 0.36rem;
    font-weight: bold;
    line-height: 0.5rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .sy_c_msg_msg {
    word-break: break-all;
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-size: 0.26rem;
    line-height: 00.32rem;
  }
  .sy_c_shop {
    margin-top: 0.4rem;
    .price {
      float: left;
      color: red;
      font-size: 0.36rem;
      font-weight: bold;
      line-height: 0.5rem;
    }
    .addcart {
      float: right;
      color: red;
      font-size: 0.55rem;
      font-weight: bold;
      line-height: 0.5rem;
    }
  }
}

.style2 {
  .hi_container {
    width: 100%;
    .ht_cc {
      box-shadow: -1px 1px 4px #999;
      display: inline-block;
      height: 5.8rem;
      overflow: hidden;
      border-radius: 0.2rem;
      width: 46%;
      background: #fff;
      margin: 0.2rem 2%;
      .ht_cc_img {
        width: 100%;
        img {
          width: 100%;
          height: 3.3rem;
        }
      }
      .ht_cc_msg {
        padding: 0.15rem;
        .ht_cc_msg_title {
          font-weight: 700;
          color: #000;
          font-size: 0.28rem;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          line-height: 0.6rem;
        }
        .ht_cc_msg_msg {
          height: 0.92rem;
          word-break: break-all;
          text-overflow: ellipsis;
          overflow: hidden;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          color: #666;
          font-size: 0.26rem;
          line-height: 0.46rem;
        }
      }
      .ht_cc_shopping {
        padding: 0.15rem;
        .price {
          float: left;
          font-size: 0.36rem;
          line-height: 0.45rem;
          color: red;
        }
        .add_cart {
          float: right;
          font-size: 0.36rem;
          line-height: 0.45rem;
        }
      }
    }
  }
}
li.active {
  color: royalblue;
}
.triangle-down.active {
  border-left: 0.11rem solid transparent !important;
  border-right: 0.11rem solid transparent !important;
  border-top: 0.11rem solid royalblue !important;
}
.triangle-up.active {
  border-left: 0.11rem solid transparent !important;
  border-right: 0.11rem solid transparent !important;
  border-bottom: 0.11rem solid royalblue !important;
}
</style>
